<template>
	<view class="content">
		
		<!--header-->
		<view class="header">
			<tui-searchbar
			 backgroundColor="#A4B8AD" 
			 height="30px"
			  radius="15px"
			   padding="0px 10px 5px 10px"
			   placeholder="搜索" disabled @click="toSearch"></tui-searchbar>
		
			<tui-tab :tabs="tabs" scroll @change="tabChange"></tui-tab>
		</view>
		<view class="article">
			<Article :data="articleData"></Article>
		</view>
		<tui-fab 
		:width="80"
		:height="80"
		:bgColor="'#5677fc'" :btnList="fablist" @click="fabClick"></tui-fab>
		
		
		
	</view>
	
	
</template>

<script>
import {banner, menus} from './data.js';
import Article from './article/article.vue'


export default {
	components: {
		Article
	},
	data() {
		return {
			title: 'Hello',
			searchForm: {
				tags: '全部',
				pageNumber: 1, // 当前页数
			    pageSize: 6, // 页面大小
			},
			pages: 0,
			articleData: [],
			content: '通知测试',
			banner: banner,
			menus: menus,
			testList: [1, 2, 3, 4],
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			fablist: [{
					bgColor: "#FFA000",
					//图标/图片地址
					imgUrl: "/static/img/article.png",
					//图片高度 rpx
					imgHeight: 50,
					//图片宽度 rpx
					imgWidth: 50,
					//名称
					text: "发布",
					//字体大小
					fontSize: 28,
					//字体颜色
					color: "#fff"
				},{
					bgColor: "#64B532",
					//图标/图片地址
					imgUrl: "/static/img/fenxiang.png",
					//图片高度 rpx
					imgHeight: 50,
					//图片宽度 rpx
					imgWidth: 50,
					//名称
					text: "分享",
					//字体大小
					fontSize: 28,
					//字体颜色
					color: "#fff"
				},],
				tabs: [],
				refreshIfNeeded: false,
		};
	},
	onShow(){
		var pages = getCurrentPages(); // 获取当前页面栈
		var currentPage = pages[pages.length - 1]; // 当前页面
		console.log("onshow:" + currentPage.data.refreshIfNeeded);
		if (currentPage.data.refreshIfNeeded) {
			currentPage.data.refreshIfNeeded = false;
			let _this = this;
			_this.searchForm.pageNumber = 1;
			_this.getList(_this.searchForm).then(res => {
				_this.articleData = res.records;
				_this.pages = res.pages;
			})
		}
	},
	async onLoad() {
		let _this = this;
		// 获取文章分类
		_this.getArticleType();
		// 获取文章列表
		await this.$onLaunched;
		this.getList().then(res => {
			_this.articleData = res.records;
			_this.pages = res.pages;
		});
		
	
		
	},
	onPullDownRefresh() {
		let _this = this;
		_this.searchForm.pageNumber = 1;
		_this.getList(_this.searchForm).then(res => {
			_this.articleData = res.records;
			_this.pages = res.pages;
			uni.stopPullDownRefresh();
		})
	},
	onReachBottom() {
		console.log("reachbottom");
		let _this = this;
		_this.searchForm.pageNumber++;
		if (_this.searchForm.pageNumber> _this.pages) {
			uni.hideNavigationBarLoading();
			// uni.showToast({
			// 	title: '暂无更多数据',
			// 	icon: 'none'	
			// })
		} else {
			_this.getList().then(res => {
				_this.articleData = _this.articleData.concat(res.records);
				uni.hideNavigationBarLoading();
			});
		}
	},
	methods: {
		goto(value){
			
		},
		tabChange(obj){
		   let _this = this;
		   _this.searchForm ={
				tags:  _this.tabs[obj.index],
				pageNumber: 1, // 当前页数
			    pageSize: 6, // 页面大小
			};
		   console.log(_this.searchForm);
		   _this.getList().then(res => {
			 _this.articleData = res.records;
			 _this.pages = res.pages;
		});
		},
		getArticleType(){
			let _this = this;
			_this.$api.getDictDataByType("article_type").then(res => {
				console.log(res)
				if(res.success){
					let typeArr = [];
					res.result.forEach(item => {
						typeArr.push(item.title);
					})
					typeArr.unshift("全部");
					_this.tabs = typeArr;
				}
			})
		},
		swiperChange(){},
		
		fabClick(e){
			if(this.tui.verifyLogin()){
				return;
			}
			
			if(e.index == 0){
				uni.navigateTo({
					url: '/pages/publish/index'
				})
			}
		},
		getList(){
			let _this = this;
			return new Promise((resovle,reject) => {
				_this.$api.getArticleList(this.searchForm).then(res => {
					// _this.articleData = res.result.records;
					resovle(res.result)
				}).catch(err => {
					reject(err);
				})
			})
			
		},
		toSearch(){
			uni.navigateTo({
				url:"/pages/index/search/index"
			})
		}
	}
};
</script>

<style lang="scss">
	@import './index.css';

</style>
